<template>
<view class="page">
	<MallHeader title="个人信息"></MallHeader>
	<view class="title">
		用户认证信息
	</view>
	<view class="form-box">
		<view class="item">
			<view class="label">
				用户姓名
			</view>
			<template v-if="isEdit">
				<input type="text" class="form-input" value="" v-model="ruleForm.realname" placeholder="请输入..."/>
			</template>
			<template v-else>
				<view class="form-input">{{ruleForm.realname}}</view>
			</template>
		</view>
		<view class="item">
			<view class="label">
				手机号码
			</view>
			<template v-if="isEdit">
				<input type="text" class="form-input" v-model="ruleForm.phone_number" placeholder="请输入..."/>
			</template>
			<template v-else>
				<view class="form-input">{{ruleForm.phone_number}}</view>
			</template>
		</view>
		<view class="item">
			<view class="label">
				所在服务站
			</view>
			<template v-if="isEdit">
				<input type="text" class="form-input" v-model="ruleForm.one_stop" value="" placeholder="请输入..."/>
			</template>
			<template v-else>
				<view class="form-input">{{ruleForm.one_stop}}</view>
			</template>
		</view>
	</view>
	<view class="title">
		银行卡信息
	</view>
	<view class="form-box">
		<view class="item">
			<view class="label">
				身份证号
			</view>
			<template v-if="isEdit">
				<input type="text" class="form-input" v-model="ruleForm.card" placeholder="请输入..."/>
			</template>
			<template v-else>
				<view class="form-input">{{ruleForm.card}}</view>
			</template>
		</view>
		<view class="item">
			<view class="label">
				开户行名称
			</view>
			<template v-if="isEdit">
				<input type="text" class="form-input" v-model="ruleForm.bankName" placeholder="请输入..."/>
			</template>
			<template v-else>
				<view class="form-input">{{ruleForm.bankName}}</view>
			</template>
		</view>
		<view class="item">
			<view class="label">
				银行卡账号
			</view>
			<template v-if="isEdit">
				<input type="text" class="form-input" v-model="ruleForm.bankCard" placeholder="请输入..."/>
			</template>
			<template v-else>
				<view class="form-input">{{ruleForm.bankCard}}</view>
			</template>
		</view>
	</view>
	
	<view class="btn-order" @click="editBtn">
		{{isEdit?'提交修改':'编辑'}}
	</view>
	
</view>
</template>

<script>
	import MallHeader from '@/components/mallHeader/mallHeader';
	import utils from '@/utils/util'
	import {isLogin, myCenter, editUser} from '@/api/substitution.js'
	
	export default {
		components:{
			MallHeader
		},
		data(){
			return {
				isEdit:!1,
				ruleForm: {
					realname: '',
					phone_number: '',
					one_stop: '',
					card: '',
					bankName: '',
					bankCard: ''
				},
				info: ''
			}
		},
		onLoad() {
			this.getData();
		},
		methods: {
			getData(){
				myCenter().then(res => {
					res.data.userInfo.address = res.data.userInfo.country + res.data.userInfo.city + res.data.userInfo.province
					this.info = res.data.userInfo
					this.ruleForm = {
						realname: res.data.userInfo.realname,
						phone_number: res.data.userInfo.phone_number,
						one_stop: res.data.userInfo.one_stop,
						card: res.data.userInfo.card,
						bankName: res.data.userInfo.bankName,
						bankCard: res.data.userInfo.bankCard
					}
				})
			},
			
			// 身份证号验证 
			isIdCard(cardid) {
				//身份证正则表达式(18位)
				var isIdCard2 = /^[1-9]\d{5}(19\d{2}|[2-9]\d{3})((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])(\d{4}|\d{3}X)$/i;
				var stard = "10X98765432"; //最后一位身份证的号码
				var first = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2]; //1-17系数
				var sum = 0;
				if (!isIdCard2.test(cardid)) {
					// console.log('isIdCard2 error')
					return false;
				}else {
					return true;
				}
				var year = cardid.substr(6, 4);
				var month = cardid.substr(10, 2);
				var day = cardid.substr(12, 2);
				var birthday = cardid.substr(6, 8);
				// console.log(year,month,day,birthday);
				if (birthday != this.dateToString(new Date(year + '/' + month + '/' + day))) { //校验日期是否合法
					// console.log('birthday error')
					return false;
				}
				for (var i = 0; i < cardid.length - 1; i++) {
					sum += cardid[i] * first[i];
				}
				var result = sum % 11;
				var last = stard[result]; //计算出来的最后一位身份证号码
				if (cardid[cardid.length - 1].toUpperCase() == last) {
					return true;
				} else {
					// console.log('stard error')
					return false;
				}
			},
			
			//日期转字符串 返回日期格式20080808
			dateToString(date) {
				if (date instanceof Date) {
					var year = date.getFullYear();
					var month = date.getMonth() + 1;
					month = month < 10 ? '0' + month: month;
					var day = date.getDate();
					day = day < 10 ? '0' + day: day;
					return year + month + day;
				}
				return '';
			},
			

			editBtn(){
				if(!this.isEdit){
					this.isEdit = !0;
				}else{
					let {realname,phone_number,one_stop,bankName,bankCard,card} = this.ruleForm;
					if(!realname){
						this.$api.msg("请输入用户姓名");
					}else if(!phone_number){
						this.$api.msg("请输入电话号码");
					}else if(!utils.regPhone(phone_number)){
						this.$api.msg("请输入正确的电话号码");
					}else if(!one_stop){
						this.$api.msg("请输入服务店名称")
					}else if(!card){
						this.$api.msg("请输入身份证号")
					}
					else if(!this.isIdCard(card)){
						this.$api.msg("请输入正确的身份证号")
					}
					
					else if(!bankName){
						this.$api.msg("请输入银行名称")
					}else if(!bankCard){
						this.$api.msg("请输入银行卡号")
					}
					else if(!/^\d{16,19}$/){
						this.$api.msg("请输入正确的银行卡号")
					}
					else{
						editUser(this.ruleForm).then(res=>{
							if(res.code==1){
								uni.showToast({
									title: res.msg,
									icon: 'success'
								});
								this.isEdit = !1;
							}
						})
					}
				}
			}
		},
	}
</script>

<style scoped lang="scss">
	.title{
		height: 80rpx;
		line-height: 80rpx;
		padding: 50rpx 30rpx 0;
		font-size: 28rpx;
		color: #999999;
	}
	.form-box{
		background-color: #FFFFFF;
		padding:0 30rpx;
		font-size: 32rpx;
		.item{
			display: flex;
			align-items: center;
			height: 100rpx;
			padding-left:10rpx;
			border-bottom:1rpx solid #EEEEEE;
			&:last-child{
				border-bottom:none;
			}
			.label{
				width: 180rpx;
				color: #666666;
			}
			.form-input{
				color: #333333;
				flex: 1 1 auto;
				width: 1%;
			}
		}
	}
	.btn-order{
		@include bgGradient();
		@include btnStyle(690,80);
		@include flexCenter();
		font-size: 30rpx;
		margin: 120rpx auto 0;
	}
</style>
